<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>2.几个注意点</title>
    <script src="../js/vue.min.js"></script>
</head>

<!-- 
			几个注意点：
					1.关于组件名:
								一个单词组成：
											第一种写法(首字母小写)：school
											第二种写法(首字母大写)：School
								多个单词组成：
											第一种写法(kebab-case命名)：my-school
											第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
								备注：
										(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
										(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

					2.关于组件标签:
								第一种写法：<school></school>
								第二种写法：<school/>
								备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。

					3.一个简写方式：
								const school = Vue.extend(options) 可简写为：const school = options
		-->

<body>
    <div id="root">
        <h1>{{msg}}</h1>
        <school></school>
    </div>

    <script type="text/javascript">
        const school = Vue.extend({
            name: 'bujunjie',
            template:
                `
                <div>
                    <h2>学校名称：{{name}}</h2>
                    <h2>学校地址：{{address}}</h2>
                </div>
             `,
            data() {
                return {
                    name: '奇瑞',
                    address: '花园大道'
                }
            },
        })

        new Vue({
            el: '#root',
            data() {
                return {
                    msg: '欢迎来到合肥'

                }
            },
            components: {
                school: school
            }
        })

    </script>

</body>

</html>